<template>
  <div class="f-dialog">
    <el-dialog
      title="提示"
      top="30vh"
      width="500px"
      :visible.sync="isShow"
      :show-close="true"
      @close="onClose"
    >
      <div class="f-body">
        <span class="f-tip">{{ tip1 }}</span>
      </div>
      <div class="f-foot">
        <div class="f-btn f-btn-blue" @click="btnConfirm">确认</div>
        <div class="f-btn f-btn-white-black f-btn-right" @click="btnCancel">
          取消
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "NormalDialog",

  data() {
    return {
      // 是否显示弹出框
      isShow: false,
      tip1: "",
    };
  },

  methods: {
    // 打开弹窗
    showTip(tip) {
      this.tip1 = tip;
      this.isShow = true;
      // 绑定监听事件
      window.addEventListener("keyup", this.listenKeyboard);
    },

    // 关闭弹窗
    closeTip() {
      this.isShow = false;
    },

    // 关闭后的回调函数
    onClose() {
      console.log("销毁");
      // 销毁监听事件
      window.removeEventListener("keyup", this.listenKeyboard);
    },

    // 键盘事件监听
    listenKeyboard(event) {
      console.log("「键盘事件」 触发key =>", event.key);
      if (
        event.code == "Enter" ||
        event.code == "NumpadEnter" ||
        event.key == "Enter"
      ) {
        this.btnConfirm();
      }
    },

    // 取消
    btnCancel() {
      console.log("取消");
      this.closeTip();
    },

    // 确认
    btnConfirm() {
      this.$emit("confirm");
    },
  },
};
</script>

<style lang="less" scoped>
.f-dialog {
  .f-body {
    margin-top: 40px;
  }
}
</style>